<template>
    <ul class="tag-list">
        <li v-for="(item,key) in dataList" :key="key">
            <van-tag plain v-if="!item.checked" @click="switchList(item.id)" size="large">{{item.title}}</van-tag>
            <van-tag plain type="danger" size="large" v-else @click="switchList(0)">{{item.title}}</van-tag>
        </li>
    </ul>
</template>
<script>
    // [{id:1,title:"测试",checked:false}]
    import {Tag} from 'vant'

    export default {
        name: "TagSwitch",
        props: {
            dataList: Array,
            switchDataList: Function
        },
        components: {
            "van-tag": Tag,
        },
        methods: {
            switchList(id) {
                this.switchDataList(id)
            }
        }
    }
</script>

<style lang="less" scoped>
    .tag-list {
        display: flex;
        flex-wrap: wrap;

        li {
            margin-top: .3rem;
            width: 33%;
        }
    }
</style>
